<template>
  <div
    class="pdfview-container"
    v-loading.fullscreen.lock="fullscreenLoading"
    element-loading-text="加载中..."
  >
    <div class="Opening-order">
      <div class="header">
        <div class="title">商户基本信息</div>
        <div class="desc">
          <div class="desc-item">
            <span>工单编号：132134123</span>
          </div>
          <div class="desc-item">
            <span>商户编码：12321321</span>
            <span>店铺名称：哈哈哈</span>
            <span>联 系 人：武广</span>
            <span>联系手机：125354354543</span>
          </div>
          <div class="desc-item">
            <span>店铺地址：都是发的所发生的GV和vdvkf</span>
          </div>
        </div>
        <div class="title">银行开信息</div>
        <div class="desc">
          <div class="desc-item">
            <span>开户行号：12321321</span>
            <span>卡号：哈哈哈</span>
          </div>
        </div>
        <div class="title">现场照片</div>
        <div class="desc">
          <img
            class="photo"
            src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4155491152,2197828090&fm=27&gp=0.jpg"
            alt
            srcset
          />
          <img
            class="photo"
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2285265856,1886796640&fm=27&gp=0.jpg"
            alt
            srcset
          />
          <img
            class="photo"
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2285265856,1886796640&fm=27&gp=0.jpg"
            alt
            srcset
          />
          <img
            class="photo"
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2285265856,1886796640&fm=27&gp=0.jpg"
            alt
            srcset
          />
          <img
            class="photo"
            src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2285265856,1886796640&fm=27&gp=0.jpg"
            alt
            srcset
          />
        </div>
      </div>
    </div>
  </div>
</template>


<script>
export default {
  data() {
    return {
      article: "",
      fullscreenLoading: true
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      document.title = "哈哈哈哈";
      setTimeout(() => {
        this.fullscreenLoading = false;
        this.$nextTick(() => {
          window.print();
        });
      }, 1000);
    }
  }
};
</script>



<style lang="scss" scoped>
.pdfview-container {
  .Opening-order {
    width: 90%;
    border: 1px solid rgb(0, 0, 0);
    margin: 0 auto;
    .header {
      padding: 25px;
      .title {
        margin: 20px 0;
        font-size: 24px;
        font-weight: bold;
      }
      .desc {
        .desc-item {
          margin: 5px 0;
          display: flex;
          flex-direction: row;
          span {
            display: inline-block;
            margin-right: 20px;
          }
        }
        .photo {
          width: 300px;
          width: 33%;
          height: 150px;
        }
      }
    }
  }
}
</style>
